<template>
  <div class="view-wrappers">
    <el-form :inline="true" :rules="rules" :model="formInline" ref="ruleForm" class="demo-form-inline">
      <div class="title">客户基本资料</div>
      <el-form-item label="企业名称：" prop="businessLicence" :label-width="labelWidth">
        <el-input v-model="formInline.businessLicence" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="统一社会信用代码：" prop="businessLicenceNo" :label-width="labelWidth">
        <el-input v-model="formInline.businessLicenceNo" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="客户类型：" prop="merchantType" :label-width="labelWidth">
        <el-select v-model="formInline.merchantType" placeholder="请选择" :style="{width:inputWidth}">
          <el-option v-for="item in merchantTypeLs" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户简称：" prop="userShortName" :label-width="labelWidth">
        <el-input v-model="formInline.userShortName" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="企业成立日期：" prop="businessLicenceSdate" :label-width="labelWidth">
        <el-date-picker v-model="formInline.businessLicenceSdate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
          value-format="yyyy.MM.dd" :clearable="false" :style="{width:inputWidth}">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="经营期限：" required prop="businessLicenceEdate" :label-width="labelWidth"
        ref="businessLicenceEdateRef">
        <div>
          <el-radio-group v-model="radio" @change="changeRadio">
            <el-radio :label="1">
              <el-date-picker v-model="qxDate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
                value-format="yyyy.MM.dd" :clearable="false" :disabled="pickDisabled" @change="changeDate"
                style="width: 190px">
              </el-date-picker>
            </el-radio>
            <el-radio :label="2" style="margin-top: 10px">长期</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="法人姓名：" prop="legalPersonName" :label-width="labelWidth">
        <el-input v-model="formInline.legalPersonName" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="法人证件类型：" required :label-width="labelWidth">
        <el-input v-model="idCardType" placeholder="请输入" disabled :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="法人身份证号：" prop="legalPersonId" :label-width="labelWidth">
        <el-input v-model="formInline.legalPersonId" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="法人身份证开始日期：" prop="legalPersonIdSdate" :label-width="labelWidth">
        <el-date-picker v-model="formInline.legalPersonIdSdate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
          value-format="yyyy.MM.dd" :clearable="false" :style="{width:inputWidth}">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="法人身份证结束日期：" prop="legalPersonIdEdate" :label-width="labelWidth">
        <el-date-picker v-model="formInline.legalPersonIdEdate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
          value-format="yyyy.MM.dd" :clearable="false" :style="{width:inputWidth}">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="法人性别：" prop="legalPersonSex" :label-width="labelWidth">
        <el-input v-model="formInline.legalPersonSex" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="法人联系电话：" prop="phone" :label-width="labelWidth">
        <el-input v-model="formInline.phone" placeholder="请输入" :style="{width:inputWidth}" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="注册地址：" prop="registeredAddress" :label-width="labelWidth">
        <el-input v-model="formInline.registeredAddress" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="注册资金：" prop="registeredFund" :label-width="labelWidth">
        <el-input v-model="formInline.registeredFund" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <!-- 日常消费结算账户资料 -->
      <div class="title" style="margin-top: 10px">日常消费结算账户资料</div>
      <el-form-item label="结算方式：" prop="settleBankType" :label-width="labelWidth">
        <el-select v-model="formInline.settleBankType" placeholder="请选择" :style="{width:inputWidth}">
          <el-option v-for="item in settleBankTypeLs" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算费率：" prop="balanceAccRate" :label-width="labelWidth">
        <el-input v-model="formInline.balanceAccRate" placeholder="请输入" :style="{width:inputWidth}"><template
            slot="append">%</template></el-input>
      </el-form-item>
      <el-form-item label="结算类型：" prop="clearingType" :label-width="labelWidth">
        <el-select v-model="formInline.clearingType" placeholder="请选择" :style="{width:inputWidth}">
          <el-option v-for="item in clearingTypeLs" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="法人姓名：" prop="legalPersonName" :label-width="labelWidth" v-if="formInline.settleBankType != 3">
        <el-input v-model="formInline.legalPersonName" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="法人身份证号：" prop="legalPersonId" :label-width="labelWidth" v-if="formInline.settleBankType != 3">
        <el-input v-model="formInline.legalPersonId" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="法人身份证开始日期：" prop="legalPersonIdSdate" :label-width="labelWidth" v-if="formInline.settleBankType != 3">
        <el-date-picker v-model="formInline.legalPersonIdSdate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
          value-format="yyyy.MM.dd" :clearable="false" :style="{width:inputWidth}">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="法人身份证结束日期：" prop="legalPersonIdEdate" :label-width="labelWidth" v-if="formInline.settleBankType != 3">
        <el-date-picker v-model="formInline.legalPersonIdEdate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
          value-format="yyyy.MM.dd" :clearable="false" :style="{width:inputWidth}">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="非法人姓名：" prop="unincorporatedName" :label-width="labelWidth"
        v-if="formInline.settleBankType == 3">
        <el-input v-model="formInline.unincorporatedName" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="非法人身份证号：" prop="unincorporatedId" :label-width="labelWidth"
        v-if="formInline.settleBankType == 3">
        <el-input v-model="formInline.unincorporatedId" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="非法人身份证开始日期：" prop="unincorporatedIdSdate" :label-width="labelWidth"
        v-if="formInline.settleBankType == 3">
        <el-date-picker v-model="formInline.unincorporatedIdSdate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
          value-format="yyyy.MM.dd" :clearable="false" :style="{width:inputWidth}">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="非法人身份证结束日期：" prop="unincorporatedIdEdate" :label-width="labelWidth"
        v-if="formInline.settleBankType == 3">
        <el-date-picker v-model="formInline.unincorporatedIdEdate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
          value-format="yyyy.MM.dd" :clearable="false" :style="{width:inputWidth}">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结算银行卡号：" prop="balanceAccCardno" :label-width="labelWidth">
        <el-input v-model="formInline.balanceAccCardno" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="开户行名称：" prop="bankName" :label-width="labelWidth">
        <el-select v-model="formInline.bankName" filterable placeholder="请选择" :style="{width:inputWidth}"
          @change="changes">
          <el-option v-for="item in bankOptionOne" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属支行名称：" prop="openAccBankname" :label-width="labelWidth">
        <el-select v-model="formInline.openAccBankname" filterable placeholder="请选择" :style="{width:inputWidth}"
          @change="changesTwo">
          <el-option v-for="item in bankOptionTwo" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="银行预留手机号：" prop="bankMobile" :label-width="labelWidth">
        <el-input v-model="formInline.bankMobile" placeholder="请输入" :style="{width:inputWidth}" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="结算账号名称：" prop="balanceAccName" :label-width="labelWidth">
        <el-input v-model="formInline.balanceAccName" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <!-- 存管结算账户资料 -->
      <div class="title" style="margin-top: 10px">存管结算账户资料</div>
      <el-form-item label="结算方式：" prop="depositSettleBankType" :label-width="labelWidth">
        <el-select v-model="formInline.depositSettleBankType" placeholder="请选择" :style="{width:inputWidth}">
          <el-option v-for="item in cgSettleBankTypeLs" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算费率：" prop="depositBalanceAccRate" :label-width="labelWidth">
        <el-input v-model="formInline.depositBalanceAccRate" placeholder="请输入" :style="{width:inputWidth}"><template
            slot="append">%</template></el-input>
      </el-form-item>
      <el-form-item label="结算类型：" prop="depositClearingType" :label-width="labelWidth">
        <el-select v-model="formInline.depositClearingType" placeholder="请选择" :style="{width:inputWidth}">
          <el-option v-for="item in clearingTypeLs" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="非法人姓名：" prop="depositUnincorporatedName" :label-width="labelWidth"
        v-if="formInline.depositSettleBankType == 3">
        <el-input v-model="formInline.depositUnincorporatedName" placeholder="请输入" :style="{width:inputWidth}">
        </el-input>
      </el-form-item>
      <el-form-item label="非法人身份证号：" prop="depositUnincorporatedId" :label-width="labelWidth"
        v-if="formInline.depositSettleBankType == 3">
        <el-input v-model="formInline.depositUnincorporatedId" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="非法人身份证开始日期：" prop="depositUnincorporatedIdSdate" :label-width="labelWidth"
        v-if="formInline.depositSettleBankType == 3">
        <el-date-picker v-model="formInline.depositUnincorporatedIdSdate" type="date" placeholder="选择日期"
          format="yyyy.MM.dd" value-format="yyyy.MM.dd" :clearable="false" :style="{width:inputWidth}">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="非法人身份证结束日期：" prop="depositUnincorporatedIdEdate" :label-width="labelWidth"
        v-if="formInline.depositSettleBankType == 3">
        <el-date-picker v-model="formInline.depositUnincorporatedIdEdate" type="date" placeholder="选择日期"
          format="yyyy.MM.dd" value-format="yyyy.MM.dd" :clearable="false" :style="{width:inputWidth}">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结算银行卡号：" prop="depositBalanceAccCardno" :label-width="labelWidth">
        <el-input v-model="formInline.depositBalanceAccCardno" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="开户行名称：" prop="depositBankName" :label-width="labelWidth">
        <el-select v-model="formInline.depositBankName" placeholder="请选择" :style="{width:inputWidth}"
          @change="changesCg">
          <el-option v-for="item in bankOptionOne" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属支行名称：" prop="depositOpenAccBankname" :label-width="labelWidth">
        <el-select v-model="formInline.depositOpenAccBankname" placeholder="请选择" :style="{width:inputWidth}"
          @change="changesTwoCg">
          <el-option v-for="item in bankOptionTwo" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="银行预留手机号：" prop="depositBankMobile" :label-width="labelWidth">
        <el-input v-model="formInline.depositBankMobile" placeholder="请输入" :style="{width:inputWidth}" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="结算账号名称：" prop="depositBalanceAccName" :label-width="labelWidth">
        <el-input v-model="formInline.depositBalanceAccName" placeholder="请输入" :style="{width:inputWidth}"></el-input>
      </el-form-item>

      <!-- 资质图片 -->
      <div class="title" style="margin-top: 10px">资质图片</div>
      <el-form-item label="营业执照：" prop="businessLicenceImg" :label-width="labelWidth" ref="businessLicenceImgRef">
        <div class="component-upload-image">
          <el-upload :action="action" :before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError"
            :on-exceed="handleExceed" name="file" :on-success="handleUploadSuccess" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
            :class="{hide: this.formInline.businessLicenceImg != ''}">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- 上传提示 -->
          <div class="el-upload__tip" slot="tip">
            请上传
            <template> 大小不超过 <b style="color: #f56c6c">20MB</b> </template>
            <template> 格式为 <b style="color: #f56c6c">png/jpg/jpeg</b> </template>
            的文件
          </div>
          <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
            <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
          </el-dialog>
        </div>
      </el-form-item>
      <el-form-item label="法人身份证正面：" prop="legalPersonFront" :label-width="labelWidth" ref="legalPersonFrontRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getLegalPersonFront"
          :value="formInline.legalPersonFront">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="法人身份证反面：" prop="legalPersonBack" :label-width="labelWidth" ref="legalPersonBackRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getLegalPersonBack"
          :value="formInline.legalPersonBack">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="结算银行卡正面：" prop="bankCardFront" :label-width="labelWidth" ref="bankCardFrontRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getBankCardFront"
          :value="formInline.bankCardFront">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="结算银行卡反面：" prop="bankCardBack" :label-width="labelWidth" ref="bankCardBackRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getBankCardBack"
          :value="formInline.bankCardBack">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="门头照：" prop="shopTop" :label-width="labelWidth" ref="shopTopRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getShopTop" :value="formInline.shopTop">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="室内场景照：" prop="shopInterior" :label-width="labelWidth" ref="shopInteriorRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getShopInterior"
          :value="formInline.shopInterior">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="收银台照：" prop="shopCashierDesk" :label-width="labelWidth" ref="shopCashierDeskRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getShopCashierDesk"
          :value="formInline.shopCashierDesk">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="非法人身份证正面：" prop="unLegalPersonFront" :label-width="labelWidth" ref="unLegalPersonFrontRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getUnLegalPersonFront"
          :value="formInline.unLegalPersonFront">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="非法人身份证反面：" prop="unLegalPersonBack" :label-width="labelWidth" ref="unLegalPersonBackRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getUnLegalPersonBack"
          :value="formInline.unLegalPersonBack">
        </ImageUploadMoreOldUrl>
      </el-form-item>

      <el-form-item label="法人手持身份证合照：" prop="handIdCard" :label-width="labelWidth" ref="handIdCardRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getHandIdCard" :value="formInline.handIdCard">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="面签二联单合同：" prop="contract" :label-width="labelWidth" ref="contractRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getContract" :value="formInline.contract">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="开户许可证：" prop="licence" :label-width="labelWidth" ref="licenceRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getLicenceImg" :value="formInline.licence">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="法人持授权书正面照：" prop="handAuthorization" :label-width="labelWidth" ref="handAuthorizationRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getHandAuthorization"
          :value="formInline.handAuthorization">
        </ImageUploadMoreOldUrl>
      </el-form-item>
      <el-form-item label="法人结算授权书：" prop="settleAuthorization" :label-width="labelWidth" ref="settleAuthorizationRef">
        <ImageUploadMoreOldUrl :limit="1" :fileSize="20" @successImgOld="getSettleAuthorization"
          :value="formInline.settleAuthorization">
        </ImageUploadMoreOldUrl>
      </el-form-item>
    </el-form>
    <div class="button_box">
      <el-button style="margin-right: 30px" @click="previousStep">上一步</el-button>
      <el-button type="primary" @click="sumit('ruleForm',1)">推送银盛审核</el-button>
      <el-button type="primary" @click="sumit('ruleForm',2)">开通存管账户</el-button>
    </div>
  </div>
</template>
<script>
  import {
    getBank,
  } from "@/api/chainManagement";
  import {
    watermarkUploadFile,
  } from "@/api/chainManagement";
  import ImageUploadMoreOldUrl from "@/components/ImageUploadMoreOldUrl"
  export default {
    name: "stepThree",
    components: {
      ImageUploadMoreOldUrl
    },
    data() {
      var checBusinessLicenceEdate = (rule, value, callback) => {
        // if (this.radio == 1 && this.qxDate == '') {
        //     console.log(111,this.radio,this.qxDate)
        //   return callback(new Error('请选择经营期限'));
        // } else if (this.radio == 2 && this.formInline.businessLicenceEdate == '') {
        //   return callback(new Error('请选择经营期限'));
        // } else {
        //   callback();
        // }
        if (!value) {
          return callback(new Error('请选择经营期限'));
        } else {
          callback();
        }
      };
      return {
        labelWidth: '180px',
        inputWidth: '300px',
        idCardType: '身份证',
        options: [{
          id: '1',
          value: '数据'
        }],
        fileSize: 20,
        limit: 1,
        fileType: ["png", "jpg", "jpeg"],
        action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
        detailDialog: false,
        data: {},
        ImgDetailDialog: false,
        dialogImageUrl: '',
        dialogVisible: false,

        formInline: {
          businessLicence: '', //企业名称
          businessLicenceNo: '', //统一社会信用代码
          merchantType: '', //客户类型 merchant_type
          userShortName: '', //客户简称
          businessLicenceSdate: '', //企业成立日期YYYYMMDD
          businessLicenceEdate: '长期', //经营期限
          legalPersonName: '', //法人姓名
          certType: '00', //法人证件类型 身份证 00（只支持 00）
          legalPersonId: '', //法人身份证号
          legalPersonIdSdate: '', //法人身份证开始日期 YYYY.MM.DD
          legalPersonIdEdate: '', //法人身份证结算日期 YYYY.MM.DD
          legalPersonSex: '', //法人性别
          phone: '', //法人电话
          registeredAddress: '', //注册地址
          settleBankType: '', //结算方式 ManageSettleBankTypeEnum
          unincorporatedName: '', //非法人姓名
          unincorporatedId: '', //非法人身份证号码
          unincorporatedIdSdate: '', //非法人身份证开始日期 YYYY.MM.DD
          unincorporatedIdEdate: '', //非法人身份证到期日期 YYYY.MM.DD
          balanceAccRate: '', //结算费率(单位：百分比)
          clearingType: '', //银盛结算类型
          balanceAccCardno: '', //结算银行卡号
          balanceAccName: '', //结算账户户名
          bankName: '', //开户行名称
          openAccBankname: '', //所属支行名称
          bankMobile: '', //银行预留手机号
          depositSettleBankType: '', //存管结算方式 manage_settle_bank_type
          depositUnincorporatedName: '', //存管非法人姓名
          depositUnincorporatedId: '', //存管非法人身份证号码
          depositUnincorporatedIdSdate: '', //存管非法人身份证开始日期 YYYY.MM.DD
          depositUnincorporatedIdEdate: '', //存管非法人身份证到期日期 YYYY.MM.DD
          depositBalanceAccRate: '', //存管结算费率(单位：百分比)
          depositClearingType: '', //存管银盛结算类型
          depositBalanceAccCardno: '', //存管结算银行卡号
          depositBalanceAccName: '', //存管结算账户户名
          depositBankName: '', //存管开户行名称
          depositOpenAccBankname: '', //存管所属支行名称
          depositBankMobile: '', //存管银行预留手机号
          businessLicenceImg: '', //营业执照
          watermarkBusinessLicenseImg: '', //营业执照图片(水印营业执照)
          legalPersonFront: '', //法人身份证正面
          legalPersonBack: '', //法人身份证反面
          bankCardFront: '', //结算账户正面
          bankCardBack: '', //结算账户反面
          shopTop: '', //商户门头照片
          shopInterior: '', //内景照片
          shopCashierDesk: '', //收银台照片
          handIdCard: '', //手持身份证合影照片
          contract: '', //二联单合同
          licence: '', //开户许可证
          handAuthorization: '', //法人/非法人手持授权书
          settleAuthorization: '', //法人/非法人结算授权书
          unLegalPersonFront: '', //非法人身份证正面
          unLegalPersonBack: '', //非法人身份证背面
          registeredFund: '', //注册资金
          type: '', //推送类型 1 普通账户 2 存管账户
        },
        rules: {
          businessLicence: [{
            required: true,
            message: '请输入企业名称',
            trigger: ['blur', 'change']
          }],
          businessLicenceNo: [{
            required: true,
            message: '请输入统一社会信用代码',
            trigger: ['blur', 'change']
          }],
          merchantType: [{
            required: true,
            message: '请选择客户类型',
            trigger: ['change']
          }],
          userShortName: [{
            required: true,
            message: '请输入客户简称',
            trigger: ['blur', 'change']
          }],
          businessLicenceSdate: [{
            required: true,
            message: '请选择企业成立日期',
            trigger: ['change']
          }],
          businessLicenceEdate: [{
            validator: checBusinessLicenceEdate,
            trigger: ['blur', 'change']
          }],
          legalPersonName: [{
            required: true,
            message: '请输入法人姓名',
            trigger: ['blur', 'change']
          }],
          legalPersonId: [{
            required: true,
            message: '请输入法人身份证号',
            trigger: ['blur', 'change']
          }],
          legalPersonIdSdate: [{
            required: true,
            message: '请选择法人身份证开始日期',
            trigger: ['change']
          }],
          legalPersonIdEdate: [{
            required: true,
            message: '请选择法人身份证结束日期',
            trigger: ['change']
          }],
          legalPersonSex: [{
            required: true,
            message: '请输入法人性别',
            trigger: ['blur', 'change']
          }],
          phone: [{
            required: true,
            message: '请输入法人联系电话',
            trigger: ['blur', 'change']
          }],
          registeredAddress: [{
            required: true,
            message: '请输入注册地址',
            trigger: ['blur', 'change']
          }],
          registeredFund: [{
            required: true,
            message: '请输入注册资金',
            trigger: ['blur', 'change']
          }],
          //   settleBankType: [{
          //     required: true,
          //     message: '请选择结算方式',
          //     trigger: ['change']
          //   }],
          //   balanceAccRate: [{
          //     required: true,
          //     message: '请输入结算费率',
          //     trigger: ['blur', 'change']
          //   }],
          //   clearingType: [{
          //     required: true,
          //     message: '请选择结算类型',
          //     trigger: ['change']
          //   }],
          //   unincorporatedName: [{
          //     required: true,
          //     message: '请输入非法人姓名',
          //     trigger: ['blur', 'change']
          //   }],
          //   unincorporatedId: [{
          //     required: true,
          //     message: '请输入非法人身份证号',
          //     trigger: ['blur', 'change']
          //   }],
          //   unincorporatedIdSdate: [{
          //     required: true,
          //     message: '请选择非法人身份证开始日期',
          //     trigger: ['change']
          //   }],
          //   unincorporatedIdEdate: [{
          //     required: true,
          //     message: '请选择非法人身份证结束日期',
          //     trigger: ['change']
          //   }],
          //   balanceAccCardno: [{
          //     required: true,
          //     message: '请输入结算银行卡号',
          //     trigger: ['blur', 'change']
          //   }],
          //   bankName: [{
          //     required: true,
          //     message: '请选择开户行名称',
          //     trigger: ['change']
          //   }],
          //   openAccBankname: [{
          //     required: true,
          //     message: '请选择所属支行名称',
          //     trigger: ['change']
          //   }],
          //   bankMobile: [{
          //     required: true,
          //     message: '请输入银行预留手机号',
          //     trigger: ['blur', 'change']
          //   }],
          //   balanceAccName: [{
          //     required: true,
          //     message: '请输入结算账号名称',
          //     trigger: ['blur', 'change']
          //   }],

          //   depositSettleBankType: [{
          //     required: true,
          //     message: '请选择结算方式',
          //     trigger: ['change']
          //   }],
          //   depositBalanceAccRate: [{
          //     required: true,
          //     message: '请输入结算费率',
          //     trigger: ['blur', 'change']
          //   }],
          //   depositClearingType: [{
          //     required: true,
          //     message: '请选择结算类型',
          //     trigger: ['change']
          //   }],
          //   depositUnincorporatedName: [{
          //     required: true,
          //     message: '请输入非法人姓名',
          //     trigger: ['blur', 'change']
          //   }],
          //   depositUnincorporatedId: [{
          //     required: true,
          //     message: '请输入非法人身份证号',
          //     trigger: ['blur', 'change']
          //   }],
          //   depositUnincorporatedIdSdate: [{
          //     required: true,
          //     message: '请选择非法人身份证开始日期',
          //     trigger: ['change']
          //   }],
          //   depositUnincorporatedIdEdate: [{
          //     required: true,
          //     message: '请选择非法人身份证结束日期',
          //     trigger: ['change']
          //   }],
          //   depositBalanceAccCardno: [{
          //     required: true,
          //     message: '请输入结算银行卡号',
          //     trigger: ['blur', 'change']
          //   }],
          //   depositBankName: [{
          //     required: true,
          //     message: '请选择开户行名称',
          //     trigger: ['change']
          //   }],
          //   depositOpenAccBankname: [{
          //     required: true,
          //     message: '请选择所属支行名称',
          //     trigger: ['change']
          //   }],
          //   depositBankMobile: [{
          //     required: true,
          //     message: '请输入银行预留手机号',
          //     trigger: ['blur', 'change']
          //   }],
          //   depositBalanceAccName: [{
          //     required: true,
          //     message: '请输入结算账号名称',
          //     trigger: ['blur', 'change']
          //   }],
          businessLicenceImg: [{
            required: true,
            message: '请上传营业执照',
            trigger: ['change']
          }],
          //   licence: [{
          //     required: true,
          //     message: '请上传开户许可证',
          //     trigger: ['change']
          //   }],
          legalPersonFront: [{
            required: true,
            message: '请上传法人身份证正面',
            trigger: ['change']
          }],
          legalPersonBack: [{
            required: true,
            message: '请上传法人身份证反面',
            trigger: ['change']
          }],
          bankCardFront: [{
            required: true,
            message: '请上传结算银行卡正面',
            trigger: ['change']
          }],
          bankCardBack: [{
            required: true,
            message: '请上传结算银行卡反面',
            trigger: ['change']
          }],
          shopTop: [{
            required: true,
            message: '请上传门头照',
            trigger: ['change']
          }],
          shopInterior: [{
            required: true,
            message: '请上传室内场景照',
            trigger: ['change']
          }],
          shopCashierDesk: [{
            required: true,
            message: '请上传收银台照',
            trigger: ['change']
          }],
          //   unLegalPersonFront: [{
          //     required: true,
          //     message: '请上传非法人身份证正面',
          //     trigger: ['change']
          //   }],
          //   unLegalPersonBack: [{
          //     required: true,
          //     message: '请上传非法人身份证背面',
          //     trigger: ['change']
          //   }],
        },
        radio: 2, //经营期限选择
        pickDisabled: true, //是否禁用经营期限时间选择
        qxDate: "",
        merchantTypeLs: [],
        settleBankTypeLs: [], //日常结算方式下拉
        cgSettleBankTypeLs:[],//存管结算方式下拉
        clearingTypeLs: [],
        bankOptionOne: [],
        bankOptionTwo: []
      };
    },
    created() {
      this.getMerchantType()
      this.getSettleBankType()
      this.getClearingType()
      this.getBank()
    },
    mounted() {

    },
    methods: {
      //获取客户类型
      getMerchantType() {
        var dictType = "merchant_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.merchantTypeLs = res.result[0].dictList;
          }).finally(() => {});
      },
      //获取结算方式
      getSettleBankType() {
        var dictType = "manage_settle_bank_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.settleBankTypeLs = res.result[0].dictList;
            this.cgSettleBankTypeLs = JSON.parse(JSON.stringify(res.result[0].dictList));
            this.cgSettleBankTypeLs.splice(2, 2);
            // console.log(this.settleBankTypeLs)
          }).finally(() => {});
      },
      //获取结算类型
      getClearingType() {
        var dictType = "merchant_clearing_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.clearingTypeLs = res.result[0].dictList;
          }).finally(() => {});
      },
      getBank() {
        //获取银行信息
        const params = {};
        getBank(params).then((res) => {
          console.log(res.result);
          this.bankOptionOne = res.result;
          this.bankOptionOne.map((item, index) => {
            this.bankOptionTwo = item.children;
          });
          // }
          console.log(this.bankOptionTwo);
        });
      },
      changes(value) {
        //银行
        console.log(value);
        this.bankOptionOne.map((item, index) => {
          if (value == item.id) {
            this.bankOptionTwo = item.children;
            this.formInline.bankName = item.label;
            this.formInline.openAccBankname = ''
          }
        });
      },
      changesTwo(id) {
        //支行选择
        this.bankOptionTwo.map((item, index) => {
          if (id == item.id) {
            // this.fromSettle.openAccBanktype = item.id;
            this.formInline.openAccBankname = item.label;
          }
        });
      },
      changesCg(value) {
        //存管银行选择
        console.log(value);
        this.bankOptionOne.map((item, index) => {
          if (value == item.id) {
            this.bankOptionTwo = item.children;
            this.formInline.depositBankName = item.label;
            this.formInline.depositOpenAccBankname = ''
          }
        });
      },
      changesTwoCg(id) {
        //存管支行选择
        this.bankOptionTwo.map((item, index) => {
          if (id == item.id) {
            // this.fromSettle.openAccBanktype = item.id;
            this.formInline.depositOpenAccBankname = item.label;
          }
        });
      },
      changeRadio(e) {
        //经营期限选择
        console.log(e);
        if (e == 2) {
          this.pickDisabled = true;
          this.formInline.businessLicenceEdate = "长期";
          this.$refs['businessLicenceEdateRef'].clearValidate();
        } else {
          this.pickDisabled = false;
          this.formInline.businessLicenceEdate = this.qxDate;
        }
      },
      changeDate(e) {
        //经营期限日期选择
        console.log(e);
        this.formInline.businessLicenceEdate = e;
      },
      getShopIconImg(e) {
        console.log(e)
      },
      handleRemove(file, fileList) { //营业执照删除
        console.log(file, fileList);
        this.formInline.businessLicenceImg = ''
        this.formInline.watermarkBusinessLicenseImg = ''
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleUploadSuccess(e, res, file) { //营业执照上传
        this.formInline.businessLicenceImg = res.response.result.url;
        console.log(res)
        let params = new FormData();
        params.append("file", file[0].raw); // 文件对象
        watermarkUploadFile(params)
          .then((res) => {
            this.formInline.watermarkBusinessLicenseImg = res.result.url;
          })
          .finally(() => {});
        this.$refs['businessLicenceImgRef'].clearValidate();
        this.loading.close();
      },
      // 上传前loading加载
      handleBeforeUpload(file) {
        let isImg = false;
        if (this.fileType.length) {
          let fileExtension = "";
          if (file.name.lastIndexOf(".") > -1) {
            fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
          }
          isImg = this.fileType.some(type => {
            if (file.type.indexOf(type) > -1) return true;
            if (fileExtension && fileExtension.indexOf(type) > -1) return true;
            return false;
          });
        } else {
          isImg = file.type.indexOf("image") > -1;
        }

        if (!isImg) {
          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
          return false;
        }
        if (this.fileSize) {
          const isLt = file.size / 1024 / 1024 < this.fileSize;
          if (!isLt) {
            this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
            return false;
          }
        }
        this.loading = this.$loading({
          lock: true,
          text: "上传中",
          background: "rgba(0, 0, 0, 0.7)",
        });
        this.number++;
      },
      // 文件个数超出
      handleExceed() {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
      },
      // 上传失败
      handleUploadError() {
        this.$message.error("上传图片失败，请重试");
        this.loading.close();
      },
      getLicenceImg(e) { //开户许可证
        this.formInline.licence = e
        this.$refs['licenceRef'].clearValidate();
      },
      getLegalPersonFront(e) { //法人身份证正面
        this.formInline.legalPersonFront = e
        this.$refs['legalPersonFrontRef'].clearValidate();
      },
      getLegalPersonBack(e) { //法人身份证反面
        this.formInline.legalPersonBack = e
        this.$refs['legalPersonBackRef'].clearValidate();
      },
      getBankCardFront(e) { //结算银行正面
        this.formInline.bankCardFront = e
        this.$refs['bankCardFrontRef'].clearValidate();
      },
      getBankCardBack(e) { //结算银行反面
        this.formInline.bankCardBack = e
        this.$refs['bankCardBackRef'].clearValidate();
      },
      getShopTop(e) { //门头照
        this.formInline.shopTop = e
        this.$refs['shopTopRef'].clearValidate();
      },
      getShopInterior(e) { //场景
        this.formInline.shopInterior = e
        this.$refs['shopInteriorRef'].clearValidate();
      },
      getShopCashierDesk(e) { //收银台
        this.formInline.shopCashierDesk = e
        this.$refs['shopCashierDeskRef'].clearValidate();
      },
      getHandIdCard(e) { //法人手持身份证
        this.formInline.handIdCard = e
        this.$refs['handIdCardRef'].clearValidate();
      },
      getContract(e) { //面签二连单
        this.formInline.contract = e
        this.$refs['contractRef'].clearValidate();
      },
      getHandAuthorization(e) { //法人持授权书
        this.formInline.handAuthorization = e
        this.$refs['handAuthorizationRef'].clearValidate();
      },
      getSettleAuthorization(e) { //法人结算授权书
        this.formInline.settleAuthorization = e
        this.$refs['settleAuthorizationRef'].clearValidate();
      },
      getUnLegalPersonFront(e) { //非法人正面
        this.formInline.unLegalPersonFront = e
        this.$refs['unLegalPersonFrontRef'].clearValidate();
      },
      getUnLegalPersonBack(e) { //非法人身份证反面
        this.formInline.unLegalPersonBack = e
        this.$refs['unLegalPersonBackRef'].clearValidate();
      },
      //上一步
      previousStep() {
        this.$emit('previousStep')
      },
      sumit(formName, status) {
        //  return
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.formInline.type = status
            console.log(this.formInline)
            console.log(this.formInline.unincorporatedName)
            this.$emit('successFrom', this.formInline)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .title {
    color: #1890ff;
    margin-bottom: 30px;
    font-size: 18px;
  }

  ::v-deep.hide .el-upload--picture-card {
    display: none;
  }
  .button_box{
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0;
  }

</style>
